<template>
  <div class="container">
    <h2 style="font-weight: 600;">{{ news.title }}</h2>
    <p>{{ news.author }}</p>
    <p>{{ news.releaseTime }}</p>
    <div v-html="article.content"></div>
  </div>
</template>

<script setup name="NewsPreview">
import { reactive } from 'vue';
import { useRoute } from 'vue-router';
import { getNewsBySourceId } from "@/api/news/news";
import { getArticleBySourceId } from "@/api/news/article";

const route = useRoute()

const news = reactive({})
const article = reactive({})

console.log(route.params)
getNewsBySourceId(route.params.sourceId).then(res => {
  Object.assign(news, res.data)
})
getArticleBySourceId(route.params.sourceId).then(res => {
  Object.assign(article, res.data)
})
</script>

<style>
.container {
  padding: 20px 600px;
}
</style>